<template>
  <div class="imageBox" v-viewer>
    <a-image
      class="imageItem"
      :style="{ width, height, objectFit: 'cover' }"
      :preview="false"
      :src="src"
    />
  </div>
</template>

<script lang="ts" setup>
// 单个图片  多个图片暂未扩展
defineOptions({
  name: 'ImageViewer',
});
defineProps({
  src: {
    type: String || Array,
    default: '',
  },
  width: {
    type: String,
    default: '200px',
  },
  height: {
    type: String,
    default: '30px',
  },
});
</script>

<style lang="scss" scoped>
.imageBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep(.imageItem) {
  display: inline-block;
  cursor: pointer;
  border-radius: calc(var(--radius) - 4px);
}
</style>
